<template>
  <div>
    <el-container>
      <el-aside width="800px">
        <div id="container" style="height: 600px"></div>
        <div id="panel"></div>
      </el-aside>

      <el-main>


        <el-table :data="transportLineData.items">
          <el-table-column label="线路编号" prop="lineNumber" width="140px" fixed="left"/>
          <el-table-column label="线路名称" prop="name" width="200px"/>
          <el-table-column label="所属机构" width="200px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.agencyId" disabled>
                <el-option v-for="(item,index) in coreOrgData" :label="item.name" :value="item.id" :key="index"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="线路类型" width="140px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.transportLineTypeId" disabled>
                <el-option v-for="(item,index) in transportLineTypeData" :label="item.name" :value="item.id"
                           :key="index"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="起始地机构" width="200px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.startAgencyId" disabled>
                <el-option v-for="(item,index) in coreOrgData" :label="item.name" :value="item.id" :key="index"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="目的地机构" width="200px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.endAgencyId" disabled>
                <el-option v-for="(item,index) in coreOrgData" :label="item.name" :value="item.id" :key="index"/>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="距离(千米)" prop="distance" width="140px"/>
          <el-table-column label="平均成本(元)" prop="cost" width="140px"/>
          <el-table-column label="预计时间(分钟)" prop="estimatedTime" width="140px"/>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <p v-if="scope.row.status==1">正常</p>
              <p v-if="scope.row.status==0">禁用</p>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="showLine(scope.row)">查看线路</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(transportLineData.page)"
          :page-sizes="[5, 10, 30, 50]"
          :page-size="Number(transportLineData.pageSize)"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(transportLineData.counts)"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import transportLineType from '@/api/base/transportLineType/index'
import transportLine from '@/api/base/transportLine/index'
import coreOrg from '@/api/base/coreOrg/index'
import AMap from 'AMap'
import indexCom from '@/components/amap/index'

export default {
  name: 'index',
  components: {
    indexCom
  },
  data() {
    return {
      transportLineData: {},
      transportLineTypeData: [],
      coreOrgData: [],
      pageNum: 1,
      pageSize: 5,
      dialogVisible: false,
      //高德地图
      map: null,
      drivingOption: null,
      // 构造路线导航类
      driving: null,
      //起始经纬度
      startLng: '',
      startLat: '',
      //结束经纬度
      endLng: '',
      endLat: ''
    }
  },
  methods: {
    showLine(row) {
      this.dialogVisible = true
      let startAgencyId = row.startAgencyId
      let endAgencyId = row.endAgencyId
      console.log('执行中!')
      /**
       * 起点机构
       */
      coreOrg.findById(endAgencyId).then(data => {
        this.endLng = data.data.longitude
        this.endLat = data.data.latitude
      })
      /***
       * 终点机构
       */
      coreOrg.findById(startAgencyId).then(data => {
        this.startLng = data.data.longitude
        this.startLat = data.data.latitude
      })
      setTimeout(() => {
        this.showMap()
      }, 500)

    },
    //高德地图
    showMap() {
      this.map = new AMap.Map('container', {
        center: [116.397559, 39.89621],
        zoom: 14
      })
      this.drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 是否可以使用轮渡
        province: '京', // 车牌省份的汉字缩写
        map: this.map,
        panel: 'panel'
      }
      if (this.driving) {
        this.driving.clear()
      }
      this.driving = new AMap.Driving(this.drivingOption)
      // 根据起终点经纬度规划驾车导航路线
      this.driving.search(new AMap.LngLat(this.startLng, this.startLat), new AMap.LngLat(this.endLng, this.endLat), this.amapStaus)
    },
    amapStaus(status, result) {
      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        console.log('', result)
        console.log('绘制驾车路线完成')
      } else {
        console.log('获取驾车数据失败：' + result)
      }
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.findAllTransportLine()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.findAllTransportLine()
    },
    findAllTransportLine() {
      transportLine.findAllTransportLinePage(this.pageNum, this.pageSize).then(data => {
        this.transportLineData = data.data

      })
    },
    findAllCoreOrg() {
      coreOrg.queryAll().then(data => {
        this.coreOrgData = data.data
      })
    },
    findAllTransportLineType() {
      transportLineType.getTransportLineTypeAll().then(data => {
        this.transportLineTypeData = data.data

      })
    }
  }, mounted() {
    this.findAllCoreOrg()
    this.findAllTransportLineType()
    this.findAllTransportLine()
  }
}
</script>

<style scoped>
html,
body,
#container {
  width: 100%;
  height: 100%;
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 10px;
  right: 500px;
  width: 280px;
}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>
